<template>
	<view class="page" :style="{'height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar :title="title"></c-nav-bar>
		<view class="item item_frist">
			<view class="i_title">抬头类型</view>
			<view class="i_types">
				<view @tap="changeType(0)">
					<image v-if="!isqy" src="https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png"></image>
					<image v-else src="https://i.ringzle.com/file/20240318/914f08290ea9411c902c294151d74b71.png"></image>
					<text>企业单位</text>
				</view>
				<view @tap="changeType(1)">
					<image v-if="!isgr" src="https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png"></image>
					<image v-else src="https://i.ringzle.com/file/20240318/914f08290ea9411c902c294151d74b71.png"></image>
					<text>个人/非企业单位</text>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="i_title">发票抬头<span>*</span></view>
			<view class="i_inp">
				<input type="text" v-model="dto.invoiceTitle" @blur="setName" @confirm="setName" :placeholder="isqy?'请填写企业名称':'请填写个人名称'" placeholder-class="inp_ph">
			</view>
		</view>
		<view class="item" v-if="isqy">
			<view class="i_title">企业税号<span>*</span></view>
			<view class="i_inp">
				<input type="text" v-model="dto.taxNumber" @blur="setCode" @confirm="setCode" placeholder="请输入纳税人识别号" placeholder-class="inp_ph">
			</view>
		</view>
		<view class="more_info" v-if="!isgr">更多信息</view>
		<view class="more_info more_info_tip" v-else>填写个人联系方式，其中电子邮箱用于接收电子发票邮件</view>
		<template v-if="isqy">
			<view class="item">
				<view class="i_title">公司地址</view>
				<view class="i_inp">
					<input type="text" v-model="dto.unitAddress" @blur="setUnitAddress" @confirm="setUnitAddress" placeholder="选填" placeholder-class="inp_ph">
				</view>
			</view>
			<view class="item">
				<view class="i_title">公司电话</view>
				<view class="i_inp">
					<input type="tel" v-model="dto.unitPhone" @blur="setUnitPhone" @confirm="setUnitPhone" placeholder="选填" placeholder-class="inp_ph">
				</view>
			</view>
			<view class="item">
				<view class="i_title">开户银行</view>
				<view class="i_inp">
					<input type="text" v-model="dto.depositBank" @blur="setDepositBank" @confirm="setDepositBank" placeholder="选填" placeholder-class="inp_ph">
				</view>
			</view>
			<view class="item">
				<view class="i_title">开户账号</view>
				<view class="i_inp">
					<input type="text" v-model="dto.bankAccount" @blur="setBankAccount" @confirm="setBankAccount" placeholder="选填" placeholder-class="inp_ph">
				</view>
			</view>
		</template>
		<view class="item">
			<view class="i_title">手机号码</view>
			<view class="i_inp">
				<input type="tel" v-model="dto.guestPhoneCopy" @blur="setGuestPhone" @confirm="setGuestPhone" placeholder="请输入联系电话" placeholder-class="inp_ph">
			</view>
		</view>
		<view class="item">
			<view class="i_title">邮箱地址</view>
			<view class="i_inp">
				<input type="email" v-model="dto.email" @blur="setEmail" @confirm="setEmail" placeholder="用于接收电子发票邮件" placeholder-class="inp_ph">
			</view>
		</view>
		<view class="set">
			<view class="s_left">
				<text>设置为默认抬头</text>
				<text>每次开票会默认填入以上信息</text>
			</view>
			<view class="s_right">
				<u-switch v-model="isDefault" activeColor="#007A69" inactiveColor="#EEEEEE" size="46" @change="changeDefault"></u-switch>
			</view>
		</view>
		
		<view class="bottom b_add" v-if="type==1">
			<view @tap="cancel">取消</view>
			<view @tap="save">保存</view>
		</view>
		<view class="bottom b_edit" v-else>
			<view @tap="save">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 82,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				title:'添加抬头',
				type:1,//1新增 2编辑
				isqy:true,
				isgr:false,
				isDefault:false,
				dto:{
					id:'',
					titleType:0,
					invoiceTitle:'',
					taxNumber:'',
					unitAddress:'',
					unitPhone:'',
					depositBank:'',
					bankAccount:'',
					guestPhone:'',
					guestPhoneCopy:'',
					email:'',
					isDefault:0,
					openId:''
				}
			}
		},
		onLoad(option) {
			if(option.type&&option.type=='edit'){
				this.title = '常用发票抬头';
				this.type = 2;
			} 
			if(option.item){
				this.dto = JSON.parse(decodeURIComponent(option.item));
				this.dto.guestPhoneCopy = this.$aesTm.tuomin(this.dto.guestPhone,2);
				this.isgr = this.dto.titleType==1?true:false;
				this.isqy = this.dto.titleType==0?true:false;
				this.isDefault = this.dto.isDefault==1?true:false;
			}
		},
		methods: {
			changeType(type){
				this.isgr = type==1?true:false;
				this.isqy = type==0?true:false;
				this.dto.titleType = type;
			},
			cancel(){
				uni.navigateBack();
			},
			setName(e){
				this.dto.invoiceTitle = e.target.value;
			},
			setCode(e){
				this.dto.taxNumber = e.target.value;
			},
			setUnitAddress(e){
				this.dto.unitAddress = e.target.value;
			},
			setUnitPhone(e){
				this.dto.unitPhone = e.target.value;
			},
			setDepositBank(e){
				this.dto.depositBank = e.target.value;
			},
			setBankAccount(e){
				this.dto.bankAccount = e.target.value;
			},
			setGuestPhone(e){
				this.dto.guestPhone = e.target.value;
			},
			setEmail(e){
				this.dto.email = e.target.value;
			},
			save(){
				if(!this.dto.invoiceTitle) return this.$showToast('请填写发票抬头');
				if(!this.dto.taxNumber&&this.isqy) return this.$showToast('请输入纳税人识别号');
				if(this.dto.unitPhone&&!/^\d{3,4}-\d{7,8}(-\d{3,4})?$/.test(this.dto.unitPhone)) return this.$showToast('请输入正确的公司电话');
				if(this.dto.guestPhone&&!/^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(this.dto.guestPhone)) return this.$showToast('请输入正确的手机号码');
				if(this.dto.email&&!/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(this.dto.email)) return this.$showToast('请输入正确的邮箱');
				if(uni.getStorageSync('userInfo')) this.dto.openId = JSON.parse(uni.getStorageSync('userInfo')).openId
				
				let method = this.type==1?'post':'put';
				
				let newDto = JSON.parse(JSON.stringify(this.dto));
				newDto.guestPhone = this.$aesTm.encrypt(newDto.guestPhone);
				delete newDto.guestPhoneCopy;
				this.$api[method]('/api/isinvoiceheader',newDto).then(res=>{
					if(res.data.code===0){
						this.$showToast(this.type==1?'新增成功':'编辑成功');
						setTimeout(()=>{
							uni.navigateBack();
						},1500)
					}else this.$showModal(res.data.msg);
				})
			},
			changeDefault(e){
				this.isDefault = e;
				this.dto.isDefault = e?1:0;
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F5F8FA;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		overflow-y: auto;
		
		.item{
			width: 100%;
			background: #fff;
			padding: 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
			&.item_frist{
				border-top: 42rpx solid #fff;
			}
			.i_title{
				width: 213rpx;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				display: flex;
				align-items: center;
				span{
					color: #FF4141;
				}
			}
			.i_inp{
				width: calc(100% - 213rpx);
				padding-left: 19rpx;
				box-sizing: border-box;
				border: none;
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.i_types{
				width: calc(100% - 213rpx);
				display: flex;
				align-items: center;
				justify-content: space-between;
				&>view{
					display: flex;
					align-items: center;
					image{
						width: 40rpx;
						height: 40rpx;
					}
					text{
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}
			}
		}
		
		.more_info{
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #808080;
			&.more_info_tip{
				font-size: 26rpx;
			}
		}
		
		
		.set{
			width: 100%;
			padding: 24rpx 30rpx 33rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			background: #fff;
			margin: 20rpx 0;
			.s_left{
				display: flex;
				flex-direction: column;
				text{
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					&:last-child{
						font-size: 26rpx;
						color: #AAAAAA;
						margin-top: 12rpx;
					}
				}
			}
			.s_right{
				width: 89rpx;
				height: 54rpx;
			}
		}
		
		.inp_ph{
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
		}
		
		.bottom{
			width: 100%;
			height: 164rpx;
			background: #fff;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 2;
			&.b_add{
				padding: 20rpx 40rpx 0;
				display: flex;
				justify-content: space-between;
				&>view{
					width: calc(50% - 15rpx);
					height: 80rpx;
					border-radius: 46rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					letter-spacing: 2rpx;
					&:first-child{
						background: #fff;
						border: 1rpx solid #007A69;
						color: #007A69;
					}
					&:last-child{
						background: #007A69;
						border: 1rpx solid #007A69;
						color: #FFFFFF;
					}
				}
			}
			&.b_edit{
				padding: 20rpx 24rpx 0;
				&>view{
					width: 100%;
					height: 82rpx;
					background: #007A69;
					border-radius: 41rpx;
					line-height: 82rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>